<template>
  <div class="form-relation-editor">
    <RelationBaseEditor
      :relationTargetFormDefinition="relationTargetFormDefinition"
      :labelWidth="labelWidth" :formDefinition="formDefinition"
      :relation.sync="relation" @initConfigs="initConfigs"/>

    <RelationTypeConfig
      :relationTargetFormDefinition="relationTargetFormDefinition"
      :labelWidth="labelWidth" :formDefinition="formDefinition"
      :relation.sync="relation" @initConfigs="initConfigs"/>

    <RelationMapping
      :relationTargetFormDefinition="relationTargetFormDefinition"
      :labelWidth="labelWidth" :formDefinition="formDefinition"
      :relation.sync="relation" @initConfigs="initConfigs"/>
  </div>
</template>
<script>
import {createRelation, RelationType} from '@comp/hhd/design/relation/types';
import {createProps} from '@/utils';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import RelationBaseEditor from '@comp/hhd/design/relation/RelationBaseEditor/RelationBaseEditor.vue';
import {getAction, postAction} from '@api/manage';
import RelationTypeConfig from '@comp/hhd/design/relation/RelationTypeConfig/RelationTypeConfig.vue';
import RelationMapping from '@comp/hhd/design/relation/RelationMapping.vue';

export default {
  name: 'RelationEditor',
  components: {
    RelationMapping,
    RelationTypeConfig,
    RelationBaseEditor,
  },
  props: {
    formDefinition: createProps(Object, createFormDefinition),
  },
  data() {
    return {
      labelWidth: '130px',
      relation: createRelation(),
      relationTargetFormDefinition: createFormDefinition(),
    };
  },
  methods: {
    addNew() {
      this.initRelation();
    },
    initRelation() {
      this.relation = createRelation();
      this.relation.relationSourceFormId = this.formDefinition.id;
      this.relation.relationSourceFormName = this.formDefinition.formName;
      this.$emit('editingRelationChange', this.relation)
    },
    edit(relation) {
      this.relation = relation || createRelation();
      this.$emit('editingRelationChange', this.relation)
    },
    save(callback) {
      if (!this.relation.relationName) return this.$message.warn('关联名称不能为空');
      if (!this.relation.relationTargetFormId) return this.$message.warn('关联单据不能为空');
      if (!this.relation.relationTargetInnerFormId) return this.$message.warn('关联对象不能为空');

      if (this.relation.relationType === RelationType.manual) {
        //手工关联
        let list = this.relation.manuals || [];
        for (let i = 0; i < list.length; i++) {
          let manual = list[i];
          if (!manual.fieldColumns || !manual.fieldColumns.length) {
            return this.$message.warn('请配置单据选择器, 第 ' + (i + 1) + ' 个手动关联配置');
          }
        }
      }

      if (this.relation.relationType === RelationType.auto) {
        //自动关联
        let list = this.relation.auto.fieldBinds || [];
        if (!list || !list.length) return this.$message.warn('请配置关联映射')
        for (let i = 0; i < list.length; i++) {
          if(!list[i].targetFieldId || !list[i].sourceFieldId) {
            return this.$message.warn('请配置字段映射, 第 ' + (i + 1) + ' 个自动关联配置');
          }
        }
      }

      this.loading = true;
      postAction('/relation/designFormRelation/saveRelation', JSON.parse(JSON.stringify(this.relation))).then(data => {
        if (data.success) {
          callback && callback();
        } else {
          this.$notification.error({message: data.message, duration: 3})
        }
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
        this.$notification.error({message: error, duration: 3})
      })
    },
    initConfigs() {
      let temp = createRelation();
      temp.id = this.relation.id;
      temp.relationSourceFormId = this.formDefinition.id;
      temp.relationSourceFormName = this.formDefinition.formName;
      temp.relationName = this.relation.relationName;
      temp.enable = this.relation.enable;
      this.relation = temp;
    },
    loadTargetFormDefinition() {
      this.loading = true;
      getAction('/form/queryById', {id: this.relation.relationTargetFormId}).then(data => {
        if (data.success) {
          this.relationTargetFormDefinition = data.result;
        } else {
          this.$notification.error({message: data.message, duration: 3});
        }
        this.loading = false;
      }).catch(error => {
        console.log(error);
        this.loading = false;
        this.$notification.error({message: error, duration: 3});
      });
    },
  },
  watch: {
    'relation.relationTargetFormId': {
      handler() {
        this.relationTargetFormDefinition = createFormDefinition();
        if (!this.relation.relationTargetFormId) return;
        this.loadTargetFormDefinition();
      },
      immediate: true,
    }
  }
};
</script>